<template>
	<view class="malfunction">
		<u-sticky bgColor="#fff">
			<view class="p-x-30 p-t-30">
				<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="输入仪器名称，如介质损耗测定仪"
					border="surround" :clearable="true" v-model="form.name" @confirm="getList" @clear="onClear"></u--input>
				<u-tabs :list="tabs" @click="tabsHandler" :activeStyle="{ color: '#3c9cff', fontWeight: 'bold' }"></u-tabs>
			</view>
		</u-sticky>
		<view class="p-30 bg-f7f8fa" v-if="datalist && datalist.length > 0">
			<view v-for="(item, index) in datalist" :key="index" class="format-item" @click="jumpMalfunction(item)">
				<view class="format-tip" :class="[item.className]">{{ item.statusName }}

				</view>
				<view class="format-content">
					<view class="malfunction-title">
						{{ item.creatName || '我的' }}-故障申请
					</view>
					<u-line dashed></u-line>
					<!-- {{detailList}} -->
					<u-row v-if="detailList && detailList.length > 0" v-for="(obj, i) in detailList" :key="i"
						customStyle="font-size: 26rpx;color: #333333;padding: 10rpx 0;margin-top: 15rpx">
						<u-col span="3">
							<text class="detail-item-name">{{ obj.name }}:</text>
						</u-col>
						<u-col span="9">
							<view class="text-e">{{ item[obj.key] || item.instrumentsDTO[obj.key] }}</view>
						</u-col>
					</u-row>
					<u-row v-if="item.approverUser"
						customStyle="font-size: 26rpx;color: #333333;padding: 10rpx 0;margin-top: 15rpx">
						<u-col span="3">
							<text class="detail-item-name">处理人:</text>
						</u-col>
						<u-col span="9">
							<view class="text-e">{{ item.approverUser['realName'] }}</view>
						</u-col>
					</u-row>
					<view class="error m-t-20" style="white-space: pre-line;">异常原因: {{ item.description }}</view>
				</view>
				<view class="submit-btn"
				v-if="userid == item.creator && item.task && item.task.taskName == '返场维修寄出' || userid == item.creator && item.task && item.task.taskName == '返厂维修寄回'">
					<u-button type="primary" text="补充信息" @click.native.stop="Submitback(item)"
						:customStyle="{ width: '140rpx', margin: 0 }"></u-button>
				</view>
				<view class="submit-btn" v-if="item.statusName == '已驳回'">
					<u-button type="primary" text="查看原因" @click.native.stop="showreason(item)"
						:customStyle="{ width: '140rpx', margin: 0 }"></u-button>
				</view>
			</view>
			<view class="loadmore" v-if="datalist.length">
				<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
					:nomore-text="nomoreText" />
			</view>
		</view>
		<u-empty v-else marginTop="30rpx" mode="list" icon="/static/null.png">
		</u-empty>
		<!-- 申报需要的按钮 -->
		<view class="malfunction-btn" @click="addHandler('form')">
			<!-- <u-icon name="plus-circle-fill" color="#0e64fe" size="60" @click="addHandler('form')"></u-icon> -->
			<image class="addicon" src="/static/addicon.png"></image>
		</view>
		<!-- 查看原因 -->
		<u-modal :show="showreasonbox" labelAlign="center" @cancel="onCancel" ref="uModal" @close="onCancel"
			:showConfirmButton="false" :closeOnClickOverlay="true">
			<!-- <view>
				<view ref="item1" class="reasontitle">驳回理由</view>
					<u--textarea v-model="reason" class="reasoncontent"  placeholder="请输入内容"></u--textarea>
			</view> -->
			<u--form labelPosition="top" ref="uForm" labelWidth="80">
				<u-form-item :label="'驳回理由'" ref="item1">
					<u--textarea disabled v-model="reason" placeholder="请输入内容" :confirmType="null"
						:showConfirmBar='false'></u--textarea>
				</u-form-item>
			</u--form>
		</u-modal>
	</view>
</template>

<script>
import SetTabBar from '@/mixins/SetTabBar.js'
export default {
	mixins: [SetTabBar],
	onShow() {
		this.getList()
		const info = uni.getStorageSync('userInfo');
		if (info && JSON.parse(info).id) {
			this.userid = JSON.parse(info).id
		}
	},
	// onload(){
	// 	this.getList()
	// },
	// 上拉加载更多
	onReachBottom() {
		if (this.total > this.form.limit) {
			this.form.limit = this.form.limit + 10
			this.getList()
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.form.limit = 10
		this.getList()
	},
	data() {
		return {
			userid: '',
			reason: '',
			showreasonbox: false,
			form: {
				page: 1,
				limit: 10,
				order: 'desc',
				orderField: `declare_date`,
				name: '',
				status: 1
			},
			datalist: [],
			tabs: [{
				name: '正常使用'
			},
			{
				name: '无法使用'
			},
			{
				name: '返厂维修'
			},
			],
			detailList: [{
				name: '申报时间',
				key: 'declareDate'
			},
			{
				name: '故障仪器',
				key: 'name'
			},
			{
				name: '型号规模',
				key: 'modelNumber'
			},
			{
				name: '制造厂商',
				key: 'manufacturer'
			},
			],
		}
	},
	filters: {
		formatStatus(value) {
			if (value == 2) {
				return '已处理'
			}
			return '待处理'
		}

	},
	methods: {
		// 查看原因
		showreason(item) {
			this.reason = item.task.comment.replaceAll("/r/n", "<br>")
			this.showreasonbox = true
		},
		onCancel() {
			this.showreasonbox = false
		},
		// 去详情
		jumpMalfunction({
			id,
			status,
			statusName,
			task,
			creator
		}) {
			// uni.navigateTo({
			// 	url: `/pages/malfunction/form?id=${id}&statusName=${statusName}`
			// })
			// return
			if (statusName == '已驳回') {
				const info = uni.getStorageSync('userInfo');
				console.log(info,creator)
				if (JSON.parse(info).id != creator) {
					// 详情
					uni.navigateTo({
						url: `/pages/malfunction/detail?id=${id}&statusName=${statusName}`
					})
				} else {
					// 修改
					uni.navigateTo({
						url: `/pages/malfunction/form?id=${id}&statusName=${statusName}&taskId=${task.taskId}`
					})
				}
			} else {
				// 详情
				if (task && task.taskName == '返场维修寄出') {
					uni.navigateTo({
						url: `/pages/malfunction/detail?id=${id}&statusName=${statusName}&specialfan=1`
					})
				} else {
					uni.navigateTo({
						url: `/pages/malfunction/detail?id=${id}&statusName=${statusName}`
					})
				}

			}
		},
		formattask(value) {
			let taskstatus = {}
			if (value == '故障审批') {
				taskstatus = {
					name: '处理中',
					className: 'bg-f4ad23',
				}
			}
			else if (value == '故障申报') {
				taskstatus = {
					name: '已驳回',
					className: 'bg-f42323',
				}
			} else {
				taskstatus = {
					name: '已处理',
					className: 'bg-09B300',
				}
			}
			return taskstatus
		},
		// tabs标签切换
		tabsHandler(val) {
			this.form.status = val.index + 1
			this.getList()
		},
		// 获取列表
		async getList() {
			this.status = 'loading';
			if (this.$hasPermission('sys:device:troubleLookALL')) {
				this.form.creator = ''
			} else {
				const info = uni.getStorageSync('userInfo');
				if (info && JSON.parse(info).id) {
					this.form.creator = JSON.parse(info).id
				}
			}
			const res = await this.$api.getMalfunctionList(this.form)
			this.datalist = res.data.list.map(item => {
				if (item.task && item.task.taskName) {
					if (item.task.taskName == '故障审批') {
						item.statusName = '处理中'
						item.className = 'bg-f4ad23'
					} else if (item.task.taskName == '故障申报') {
						item.statusName = '已驳回'
						item.className = 'bg-f42323'
					}
					else {
						item.statusName = '已处理'
						item.className = 'bg-09B300'
					}
				} else {
					item.statusName = '已处理'
					item.className = 'bg-09B300'
				}
				return item

			})
			this.total = res.data.total
			this.status = this.total <= this.form.limit ? 'nomore' : 'loadmore';
			uni.stopPullDownRefresh();
		},
		// 返厂维修
		Submitback({
			id,
			status,
			statusName,
			task
		}) {
			uni.navigateTo({
				url: `/pages/malfunction/back?id=${id}&statusName=${statusName}&taskId=${task.taskId}`
				// url:`/pages/malfunction/back`
			})
		},
		addHandler(path) {
			uni.navigateTo({
				url: `/pages/malfunction/${path}`
			})
		},
		onClear() { }
	}
}
</script>

<style lang="scss" scoped>
.malfunction {
	.malfunction-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		padding-bottom: 20rpx;
	}

	.detail-item {
		font-size: 26rpx;
		color: #333333;
		padding: 6rpx 0;
	}

	.detail-item-name {
		color: #919191;
		padding-right: 30rpx;
	}

	.error {
		color: #666666;
		font-size: 22rpx;
		background: #F7F9FC;
		border-radius: 5rpx;
		padding: 24rpx;
	}

	.malfunction-btn {
		position: fixed;
		bottom: 280rpx;
		right: 30rpx;

	}

	.addicon {
		width: 128rpx;
		height: 128rpx;
	}

	.submit-btn {
		display: flex;
		justify-content: flex-end;
		padding: 0 20rpx 20rpx 0;
	}
}

.reasontitle {
	margin-bottom: 30rpx;

	text-align: center;
}

.reasoncontent {
	width: 500rpx;
	height: 200rpx;
	background-color: #f5f5f5;
	color: #bfbfbf;
}</style>